<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h2>影视信息列表</h2>
<div>
    <!--    <form method="post" action="#" onsubmit="return checkLength()">-->
    <!--    </form>-->
    影视分类：<select name="category" id="category">
    <option value="">全部</option>
    <option value="电视剧">电视剧</option>
    <option value="电影">电影</option>
</select>
    影视语言：<select name="languageId" id="languageId">
    <option value="0">全部</option>
</select>
    <input type="button" id="chaxun" value="查询" onclick="chaxun(1)">
    <input type="button" value="新  增" onclick="add()">
</div>
<table id="table" border="1">
    <tr id="tr">
        <th>编号</th>
        <th>名称</th>
        <th>主演</th>
        <th>分类</th>
        <th>语言</th>
        <th>集数</th>
        <th>操作</th>
    </tr>


</table>
<div id="di">

</div>
</body>
<script th:src="@{https://code.jquery.com/jquery-3.5.1.min.js}" src="js/jquery.js"></script>
<script>
    $(document).ready(function () {
        $.ajax({
            type: "GET",
            url: "/selectAll",
            dataType: "json",
            success: function (data) {
                //获取model中roleId
                // var brandId = [[${languageId}]];
                // alert("json："+data);
                for (var i in data) {
                    var op = "<option ";
                    // if (data[i].id == languageId) {
                    //     op += " selected='selected' ";
                    // }
                    op += " value='" + data[i].id + "'>" + data[i].name + "</option>";
                    $("#languageId").append(op);
                }
            },
            error: function (data) {
                alert("对不起，获取数据失败！");
            }
        });
        chaxun(1);
    });

    function chaxun(pageIndex) {
        $("#table tr:gt(0)").remove();
        var languageId = $("#languageId").val();
        var category = $("#category").val();
        $.getJSON("/list?category=" + category + "&languageId=" + languageId + "&pageIndex=" + pageIndex, function (data) {
            $.each(data.list, function (index, ele) {
                let tr = `<tr class="tr">
                        <td>${ele.id}</td>
                        <td>${ele.title}</td>
                        <td>${ele.actors}</td>
                        <td>${ele.category}</td>`;
                if (ele.languageId==1){
                    tr=tr+`<td>国语</td>`;
                }else if (ele.languageId==2){
                    tr=tr+`<td>粤语</td>`;
                }else if (ele.languageId==3){
                    tr=tr+`<td>英语</td>`;
                }
                tr=tr+`<td>${ele.nums}</td>
        <td><a href='#' onclick='bianji(${ele.id})'>编辑</a>
        <a href='#' >删除</a></td>
    </tr>`;
                $("#table").append(tr);
            });
            var dv=` <a href="#"  onclick='chaxun(1)'>首页</a>
    <a href="#"  onclick='chaxun(${data.pageIndex-1})'>上一页</a>
    <a href="#"  onclick='chaxun(${data.pageIndex+1})'>下一页</a>
    <a href="#"  onclick='chaxun(${data.totalPage})'>尾页</a>
    第${data.pageIndex}页，共${data.totalPage}页`;
            $("#di").html(dv);
        });

    }
    function add() {
        window.location.href="/toAdd";
    }
    function bianji(id) {
        window.location.href="/modiaf?id="+id;
    }
</script>
</html>